<template>
    <div class="in-control-attribute-form">
        <el-form class="form" label-position="top">
            <el-form-item label="标题">
                <el-input v-model="formData.form.label"></el-input>
            </el-form-item>
            <el-form-item label="标题宽度">
                <el-input-number v-if="!formData.form.hideLabel" v-model="formData.form.labelWidth" :min="1"
                    :max="1000" />
                <el-checkbox style="margin-left: 10px;" v-model="formData.form.hideLabel">隐藏标题</el-checkbox>
            </el-form-item>
            <el-form-item label="默认值">
                <el-input v-model="formData.attribute.value"></el-input>
            </el-form-item>
            <el-form-item label="提示">
                <el-input v-model="formData.attribute.placeholder"></el-input>
            </el-form-item>
            <el-form-item label="标签对齐方式">
                <div class="form-position">
                    <el-radio-group v-model="formData.form.labelPosition" size="default">
                        <el-radio-button value="left">左对齐</el-radio-button>
                        <el-radio-button value="right">右对齐</el-radio-button>
                        <el-radio-button value="top">顶部对齐</el-radio-button>
                    </el-radio-group>
                </div>
            </el-form-item>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="是否禁用">
                        <el-checkbox style="margin-left: 10px;" v-model="formData.attribute.disabled">是</el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="是否只读">
                        <el-checkbox style="margin-left: 10px;" v-model="formData.attribute.readonly">是</el-checkbox>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="格式化">
                <el-input v-model="formData.attribute.formatter"></el-input>
            </el-form-item>
            <el-form-item label="输入长度限制">
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="最大长度">
                            <el-input-number v-model="formData.attribute.maxlength" :min="1" :max="1000" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="最小长度">
                            <el-input-number v-model="formData.attribute.minlength" :min="1" :max="1000" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="一键清空按钮">
                <el-radio-group v-model="formData.attribute.clearable">
                    <el-radio :value="true">显示</el-radio>
                    <el-radio :value="false">不显示</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
const formData = defineModel();
watchEffect(() => {
    if (formData.value.form.hideLabel) {
        formData.value.form.labelWidth = "auto";
    } else {
        formData.value.form.labelWidth = 80;
    }
});
</script>
<style></style>